<template>
    <div>{{ person.name }} - {{ person.age }} <button @click="person.age += 1">年龄 +1</button><button
            @click="toRowFunc">person to raw</button>
    </div>
    <div>
        <div v-show="person.car">车辆信息： {{ person.car }}</div>
        <button @click="addPrice">涨价</button>
        <button @click="addCar">添加车辆</button>
    </div>
</template>

<script>
import { markRaw, reactive, toRaw } from 'vue';

export default {
    name: "Demo",
    setup() {

        let person = reactive({
            name: '张三',
            age: 18
        })

        const toRowFunc = () => {
            // toRaw 将对象转换为原始无响应式的对象
            const p = toRaw(person)
            console.log('p:', p)
        }

        const addCar = () => {
            // markRaw 将响应式数据中的指定属性标记成非响应式的原始对象
            person.car = markRaw({
                carname: 'benz',
                price: '30'
            })
        }

        const addPrice = () => {
            person.car.price += 1
            console.log(person.car)
        }


        return {
            person,
            toRowFunc,
            addCar,
            addPrice
        }
    },
};
</script>

<style></style>
